<template>
	<scroll-view scroll-y="true" class="homeBox" @scrolltolower="lower">
		<uni-nav-bar :fixed="true" height="70" :statusBar="true" leftWidth="630rpx" :border="false" background-color="rgba(0, 0, 0, 1)">
			<template v-slot:left >
				<view class="homenav">
					<view :class="deviceClass">
						<i class="iconfont icon-sousuo homenavRSousuo" @click="doSearch()"/>
						<input placeholder="请输入文字" confirm-type="search" class="swiper1" @confirm="doSearch()" v-model="paramObj.name" type="text" />
						
						<i class="iconfont icon-searchclose close-class" v-if="paramObj.name.length>0" @click.stop="clearText"/>
					</view>
				</view>
			</template>
		</uni-nav-bar>
		<view class="nav">
			<view class="homenavSelect">
				<uniPicker style="width: 50%;" ref="uniPicker" v-model="paramObj.orderBy" @p="pBtn" />
				<!-- <uniPicker ref="uniPicker1" v-model="paramObj.genreId" @p="pBtn1" /> -->
				<view class="homeSelect" style="width: 50%;" @click="manClick">
					人数 {{paramObj.stock}}
					<image class="homeSelect-img" src="@/static/img/bottom.png"></image>
				</view>

				<!-- <uniPicker style="width: 33.3%;" ref="uniPicker2" v-model="paramObj.sortValue" @p="pBtn2" /> -->
			</view>
		</view>
		<view class="home-box" >
			<!-- 商品列表 -->
			<view class="shop-list" v-if="shopList.length>0">
				<view v-for="(item, index) in shopList" :key="index" class="shop-item" @click="goPage('/page_home/planDetail?id='+item.id)">
					<!-- 商品图片 -->
					<image :src="host+item.icon" mode="aspectFill" class="shop-image"></image>
					<!-- 商品信息 -->
					<view class="shop-info">
						<!-- 标题 -->
						<text class="shop-title">{{ item.name }}</text>
						<!-- 名字 -->
						<text class="shop-name">{{ item.tags?item.tags.join('-'):'-' }}</text>
						<!-- 时间 -->
						<!-- <text class="shop-time">时间：{{ $publicFun.GetTime(item.validTimeStart).slice(0,10)  }}-{{ $publicFun.GetTime(item.validTimeEnd).slice(0,10)  }}</text> -->
						<view class="shop-info-bottom">
							<!-- 地点 -->
							<text class="shop-location">地点：{{ item.region }}</text>
							<!-- 价格 -->
							<text class="shop-price"><text class="price-icon">￥</text>
								{{ item.currentLowestUnitPrice/100 }}</text>
						</view>
					</view>
				</view>
				<uLoadMore
				  v-if="shopList.length>=6"
				  :status="more"
				></uLoadMore>
			</view>
			<sunui-template v-else title="暂无发布商品~" />
		</view>
		<addressBox ref="addressBox" @addrFun="addrFun" />
		<info ref="info" v-model="paramObj" @addToCart="addToCart" />
	</scroll-view>
</template>

<script>
	import info from './component/lickModel/info.vue'
	import {
		mapGetters
	} from 'vuex'
	import addressBox from '@/components/cityPicker/addressBox.vue'
	import uniPicker from '@/components/uni_picker/uni_picker.vue'
import uLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	export default {
		name: 'uni_home',
		components: {
			addressBox,
			uniPicker,
			uLoadMore,
			info,
		},
		data() {
			return {
				imgUrl: this.$apiFun.imgUrl,
				host: this.$apiFun.host,
				more: 'more', //noMore more loading
				NewsList: [], //输入框轮播文案
				// 输入框轮播
				indicatorDots1: false,
				autoplay1: true,
				vertical1: true,
				interval1: 5000,
				duration1: 1000,
				circular1: true,
				shopList: [],
				paramObj: {
					page: 1,
					pageSize: 10,
					name: '',
					orderBy: '',
					stock:'',
					isTravel:true,
				},
				deviceClass:'',
			}
		},
		watch: {},
		computed: {
			//login_status 0 未登录 、1临时微信登录 2已登录
			...mapGetters([
				'login_status',

			]),

		},
		async onLoad(option) {
				const systemInfo = uni.getSystemInfoSync();
				console.log('systemInfo.platform',systemInfo.platform)
				if (systemInfo.platform === 'android') {
				  this.deviceClass = 'homenavR homenavR_android';
				} else if (systemInfo.platform === 'ios') {
				  this.deviceClass = 'homenavR homenavR_ios';
				} else {
				  this.deviceClass = 'homenavR'; // 或者其他默认样式类名
				}
			this.init()
		},
		mounted() {
			this.setPicker()
		},
		methods: {
			setPicker() {
				const goldenArea = [{
					name: '综合排序',
					id: 0
				}, {
					name: '库存排序',
					id: 'stock'
				}, {
					name: '价格排序',
					id: 'price'
				}, {
					name: '时间排序',
					id: 'time'
				}]
				const timeArr = [{
					name: '全部时间',
					id: 0
				}, {
					name: '一周内',
					id: 1
				}, {
					name: '一月内',
					id: 2
				}, {
					name: '本周末',
					id: 3
				}]
				this.$nextTick(() => {
					this.$refs['uniPicker'].changeShow({
						array: goldenArea,
						id: 0,
					})
					// this.$refs['uniPicker2'].changeShow({
					// 	array: goldenArea,
					// 	id: 3,
					// })
				})
			},
			async init() {
				this.more = 'loading'
				let {
					datas
				} = await this.$apiFun.getApi(
					this.$api.goodsListApi,
					this.paramObj
				)
				uni.hideLoading()
				if (datas.length > 0) {
					this.shopList = this.shopList.concat(datas)
					this.more = 'more'
				} else {
					this.more = 'noMore'
				}
			},
			
			goPage(url) {
				uni.navigateTo({
					url:url
				})
			},
			manClick() {
				this.$nextTick(() => {
					const paramObj = JSON.parse(JSON.stringify(this.paramObj))
					this.$refs['info'].open(paramObj)
				})
			},
			pBtn(e) {
				this.paramObj.orderBy = e.id
				this.doSearch()
			},
			openAddr() {
				this.$refs['addressBox'].open()
			},
			addrFun(val) {
				console.log('val---------', val)

			},
			
			clearText(){
				this.paramObj.name = ''
				this.doSearch()
			},
			addToCart(val) {
				this.paramObj.stock = val
				this.doSearch()
			},
			doSearch(){
					uni.showLoading()
					this.paramObj.page=1
					this.shopList = []
					this.init()
			},
			lower() {
				this.paramObj.page++
				this.init()
			},
		},
		onReachBottom() {
			this.paramObj.page++
			this.init()
		},
		onPullDownRefresh() {},
	}
</script>
<style>
	page{
		height:100%;
		background: #000000;
		color: white;
		overflow: hidden;
	}
</style>
<style scoped lang="less">
	page {
		width: 100%;
		height: 100%;
		overflow: hidden;
		background: #000000;
		color: rgba(255, 255, 255, 1);

		.homeBox {
			background: #000000;
			width: 100%;
			height: 100%;
			padding-bottom: 30rpx;
			box-sizing: border-box;
		}

		.home-box {
			padding: 105rpx 15rpx 0;
			box-sizing: border-box;

		}

		.nav {
			position: fixed;
			left: 0;
			right: 0;
			// top: 65rpx;
			// top: 138rpx;
			height: 100rpx;
			z-index: 1;
			background-color: rgba(0, 0, 0, 1);
			// padding-top: 40rpx;
		}
		.homenav {
			height: 100%;
			width: 100%;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			background: transparent;
			position: relative;
			.homenav-img {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				margin-right: 20rpx;
				border: 2rpx solid #3b82f6;
			}
		
			.homenavR {
				display: flex;
				align-items: center;
				width: 100%;
				box-sizing: border-box;
				position: relative;
				flex: 1;
				position: absolute;
				left: 0;
				top:0;
				z-index: 999;
				padding: 0 40rpx 0 0;
				.homenavRSousuo {
					position: absolute;
					z-index: 1;
					color: white;
					left: 30rpx;
					color: #3b82f6;
				}
		.close-class{
			color: #3b82f6;
			position: absolute;
			z-index: 1;
			right: 70rpx;
			border: 1rpx solid #3b82f6;
			border-radius: 50%;
			padding: 3rpx;
			box-sizing: border-box;
		}
				.swiper1 {
					width: 100%;
					height: 70rpx;
					// background-color: rgba(0, 0, 0, .1);
					border: 1rpx solid #3b82f6;
					margin: 0 auto;
					border-radius: 70rpx;
					padding: 0 50rpx 0 80rpx;
					box-sizing: border-box;
					font-size: 24rpx;
					color: #fff;
					line-height: 70rpx;
					width: 100%;
					overflow: hidden;
		
					.swiper1View {
						white-space: nowrap;
					}
				}
			}
		
			.homenavR_android{
				padding: 15rpx 40rpx 0 0;
			}
			.homenavR_ios{
				padding: 0 40rpx 0 0;
			}
			.qiandao {
				width: 50rpx;
				height: 50rpx;
				margin-left: 20rpx;
			}
		}

		.homeSelect {
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			color: #68686a;

			.homeSelect-img {
				width: 35rpx;
				height: 30rpx;
				margin-left: 10rpx;
			}
		}

		.homenavSelect {
			display: flex;
			align-items: center;
			justify-content: space-around;
			text-align: center;
			background-color: rgba(0, 0, 0, 1);
			height: 100rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			.homeSelect{
			color: rgba(255, 255, 255, 1)!important;
				
			}
			.pickerBox {
			color: rgba(255, 255, 255, 1)!important;
				
			}
			
		}

		/* 商品列表 */
		.shop-list {
			margin-top: 15rpx;
			display: flex;
			flex-direction: column;

			/* 竖向排列 */
			/* 单个商品项 */
			.shop-item {
				display: flex;
				align-items: center;
				padding: 30rpx 20rpx;
				box-sizing: border-box;
				margin-bottom: 20rpx;
				// background-color: rgba(255, 255, 255, 0.1);
				border-radius: 10rpx;
				overflow: hidden;
				box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
			}

			/* 商品图片 */
			.shop-image {
				border-radius: 10rpx;
				width: 140rpx;
				height: 200rpx;
			}

			/* 商品信息 */
			.shop-info {
				flex: 1;
				padding: 0;
				margin-left: 20rpx;
			}

			/* 商品标题 */
			.shop-title {
				height: 85rpx;
				font-size: 30rpx;
				color: #fff;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				/* 限制文本显示为2行 */
				-webkit-box-orient: vertical;
				/* 垂直排列盒子 */
				overflow: hidden;
				/* 隐藏超出部分 */
				text-overflow: ellipsis;
				/* 显示省略号 */
				margin-bottom: 10rpx;
			}

			.shop-name {
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
				width: 400rpx;
				display: block;
				font-size: 28rpx;
				color: rgba(255, 255, 255, .7);
				margin-bottom: 5rpx;

			}

			.shop-time {
				display: block;
				font-size: 28rpx;
				color: rgba(255, 255, 255, 0.7);
				margin-bottom: 5rpx;
			}

			.shop-info-bottom {
				display: flex;
				align-items: center;
				justify-content: space-between;

				/* 商品地点 */
				.shop-location {
					display: block;
					font-size: 28rpx;
				color: rgba(255, 255, 255, 0.7);
					margin-bottom: 10rpx;
				}

				/* 商品价格 */
				.shop-price {
					display: block;
					font-size: 30rpx;
					color: #f87fa8;
					font-weight: bold;

					.price-icon {
						font-size: 18rpx;
					}
				}
			}
		}





	}
</style>